<template>
	<view class="container">
		<u-navbar placeholder leftIconColor="#fff" bgColor="transparent" title="忘记密码" :autoBack="true"></u-navbar>

		<view class="pad-32">
			<u--form labelPosition="left" :model="info" ref="form1" labelWidth="160rpx"
				:labelStyle="{fontSize: '28rpx'}">
				<view class="bg-white pad-left-right-24 pad-top-bottom-16 radius24">
					<u-form-item label="手机号" prop="tel" borderBottom="true">
						<u--input maxlength="12" type="text" clearable placeholderClass="input-style" placeholder="请输入手机号"
							v-model="info.tel" border="none"></u--input>
					</u-form-item>
					<u-form-item label="验证码" prop="sms_code" borderBottom="true" class="mar-top-40">
						<u-input type="number" clearable placeholderClass="input-style" placeholder="请输入验证码"
							v-model="info.sms_code" border="none">
							<template slot="suffix">
								<text v-if="codeTime == 60" @click="hanldePostCode"
									class="font-24">获取验证码</text>
								<text v-else class="font-24">{{codeText}}</text>
							</template>
						</u-input>
					</u-form-item>
					
					<u-form-item label="新密码" v-show="showPassword === true" prop="login_secret"
						class="mar-top-40" borderBottom="true">
						<u-input autocomplete="off" clearable :password="false"
							placeholderClass="input-style" placeholder="请输入密码" v-model="info.login_secret"
							border="none">
							<template slot="suffix">
								<div>
									<u-icon color="#655d5d" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
								</div>
							</template>
						</u-input>
					</u-form-item>
					
					<u-form-item label="新密码" v-show="showPassword === false" prop="login_secret"
						class="mar-top-40" borderBottom="true">
						<u-input autocomplete="off" clearable :password="true"
							placeholderClass="input-style" placeholder="请输入密码" v-model="info.login_secret"
							border="none">
							<template slot="suffix">
								<div>
									<u-icon color="#655d5d" size="20" class="icon" @click="changePassword"
										:name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon>
								</div>
							</template>
						</u-input>
					</u-form-item>
				</view>
			</u--form>
			<view class="betweenX action font-24 mar-top-20">
				<view class="color-grey">密码内需同时包含数字、字母，长度在6-12之间</view>
			</view>
			<!-- <view class="text-center mar-top-30 font-30 color-grey">忘记密码</view> -->
			<u-button :customStyle="{borderRadius: '46rpx', border:0}" class="mar-top-96 font-32 button bg-theme"
				@click="submit">确定</u-button>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		postSend,
		forgotPass
	} from '@/config/api.js'

	export default {
		data() {
			return {
				// 用户信息
				info: {},
				// 倒计时秒
				codeTime: 60,
				// 定时器
				inter: null,
				// 查看密码
				showPassword: false,
			}
		},
		onLoad() {
			
		},
		methods: {
			// 查看密码
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			// 判断环境
			getEnvironment() {
				// #ifdef H5
				return 'H5'
				// #endif
			},
			// 提交数据
			submit() {
				if (this.info.login_secret == '') {
					uni.showToast({
						title: '请输入新密码'
					})
					return
				}
				
				let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
				if (!reg.test(this.info.login_secret ) || this.info.login_secret.length < 6 || this.info.login_secret.length > 12) {
					uni.$u.toast('密码格式不正确')
					return
				}
				
				// 提交密码
				forgotPass(this.info).then(res=>{
					
					uni.showToast({
						title: res.msg
					})
						
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/my/login'
						})
					},1000)
				})
				
			},
			// 获取验证码
			hanldePostCode() {
			
				if (this.info.tel == '') {
					uni.$u.toast('手机号不能为空')
					return
				}
				console.log(this.info.tel)
				if (!/^1[23456789]\d{9}$/.test(this.info.tel)) {
					uni.$u.toast('手机号格式不正确')
					return
				}
				
				
				let data = {
					tel: this.info.tel,
					scene: 'user_forgot_login_pwd'
				}
			
				uni.showLoading({
					title: '发送中...'
				})
				postSend(data).then(res => {
					uni.hideLoading();
					uni.$u.toast(res.msg);
					clearInterval(this.inter);
					this.codeTime -= 1
					this.codeText = `${this.codeTime}秒重新获取`;
					this.inter = setInterval(() => {
						this.codeTime -= 1
						this.codeText = `${this.codeTime}秒重新获取`;
						// 倒计时完成
						if (this.codeTime <= 0) {
							this.codeTime = `获取验证码`;
							this.codeTime = 60;
							clearInterval(this.inter);
						}
					}, 1000);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vmax;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		::v-deep .u-form-item__body {
			height: 100rpx;
		}

		.button {
			box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
			height: 96rpx;
			color: white;
		}
	}
</style>